<template>
  <div>
    <div>
      <CloudRadioGroup v-model="value" @change="onChange">
        <CloudRadioButton value="a"> Hangzhou </CloudRadioButton>
        <CloudRadioButton value="b"> Shanghai </CloudRadioButton>
        <CloudRadioButton value="c"> Beijing </CloudRadioButton>
        <CloudRadioButton value="d"> Chengdu </CloudRadioButton>
      </CloudRadioGroup>
    </div>
    <div :style="{ marginTop: '16px' }">
      <CloudRadioGroup default-value="a" @change="onChange">
        <CloudRadioButton value="a"> Hangzhou </CloudRadioButton>
        <CloudRadioButton value="b" disabled> Shanghai </CloudRadioButton>
        <CloudRadioButton value="c"> Beijing </CloudRadioButton>
        <CloudRadioButton value="d"> Chengdu </CloudRadioButton>
      </CloudRadioGroup>
    </div>
    <div :style="{ marginTop: '16px' }">
      <CloudRadioGroup disabled default-value="a" @change="onChange">
        <CloudRadioButton value="a"> Hangzhou </CloudRadioButton>
        <CloudRadioButton value="b"> Shanghai </CloudRadioButton>
        <CloudRadioButton value="c"> Beijing </CloudRadioButton>
        <CloudRadioButton value="d"> Chengdu </CloudRadioButton>
      </CloudRadioGroup>
    </div>
  </div>
</template>

<script>
  export default {
    title: '2.按钮样式',
    subTitle: '按钮样式的单选组合。',
    data () {
      return {
        value: 'a',
      }
    },
    computed: {
    },
    methods: {
      onChange (value) {
        console.log('this.value', this.value)
        console.log(`checked = ${value}`);
      },
    }
  }
</script>

<style lang="scss">
</style>